<template>
	<view class="text-overflow">
		<block v-if="timeShower">
			<block v-if="skin=='skin1'" class="text-blue text-sm">
				<text class="cu-tag line-blue round margin-right-xs text-xs sm">
					<!-- <block v-if="showEndTime.y">{{showEndTime.y}}年</block>
					<block v-if="showEndTime.m">{{showEndTime.m}}月</block> -->
					<block v-if="showEndTime.d">{{showEndTime.d}}号</block>
					<block v-if="showEndTime.h">{{showEndTime.h}}点</block>
				</text>
				<text class="cu-tag bg-blue radius margin-right-xs sm">{{timeShower.hours}}</text>:
				<text class="cu-tag bg-blue radius margin-right-xs sm">{{timeShower.minutes}}</text>:
				<text class="cu-tag bg-blue radius sm">{{timeShower.seconds}}</text>
			</block>
			<block v-else-if="skin=='skin2'" class="text-blue text-sm">
				{{beforTxt}}
				<text class="cu-tag bg-blue radius margin-right-xs sm">{{timeShower.hours}}</text>:
				<text class="cu-tag bg-blue radius margin-right-xs sm">{{timeShower.minutes}}</text>:
				<text class="cu-tag bg-blue radius sm">{{timeShower.seconds}}</text>
			</block>
			<block v-else-if="skin=='skin3'" class="text-blue text-sm">
				{{beforTxt}}
				<text class="cu-tag bg-white radius margin-right-xs sm">{{timeShower.hours}}</text>:
				<text class="cu-tag bg-white radius margin-right-xs sm">{{timeShower.minutes}}</text>:
				<text class="cu-tag bg-white radius sm">{{timeShower.seconds}}</text>
			</block>
			<block v-else>
				{{beforTxt}}{{timeShower.hours}}:{{timeShower.minutes}}:{{timeShower.seconds}}{{afterTxt}}
			</block>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			beforTxt: {
				type: String,
				default: ''
			},
			afterTxt: {
				type: String,
				default: ''
			},
			value: {
				type: String|Number,
				default: ''
			},
			skin: {
				type: String,
				default: 'skin1'
			}
		},
		data() {
			return {
				time: 0,
				timeShower: null,
				showEndTime: {
					y: 0,
					m: 0,
					d: 0,
					h: 0
				}
			}
		},
		created: function(e) {
			this.$nextTick((r) => {
				if (parseInt(this.value) > 0) {
					this.mathTime(this.value)
					this.mathEndTime()
				}
			})
		},
		beforeDestroy: function(e) {
			if (this.timeSetter) {
				clearInterval(this.timeSetter)
				this.timeSetter = null
			}
		},
		methods: {
			mathEndTime() {
				var date = new Date(parseInt(this.value) * 1000)
				var year = date.getFullYear()
				var mouth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
				var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())

				var showEndTime = this.showEndTime
				var now_date = new Date()
				if (now_date.getFullYear() != year) {
					showEndTime.y = year
				}
				if (now_date.getMonth() != date.getMonth()) {
					showEndTime.m = mouth
				}
				if (now_date.getDate() != date.getDay()) {
					showEndTime.d = day
				}
				showEndTime.h = hour
				this.showEndTime = showEndTime
			},
			mathTime(time) {
				if (this.timeSetter) {
					clearInterval(this.timeSetter)
					this.timeSetter = null
				}
				this.time = parseInt(time)
				this.timeSetter = setInterval((res) => {
					this.extTime(this.time)
				}, 200)
			},
			extTime(end_time) {
				var timestamp = (new Date()).valueOf()
				//相差的总秒数
				var totalSeconds = end_time - parseInt(timestamp / 1000)
				if (totalSeconds <= 0) {
					clearInterval(this.timeSetter)
					this.timeSetter = null
				}
				// var days = Math.floor(totalSeconds / (60 * 60 * 24))
				var modulo = totalSeconds % (60 * 60 * 24)
				var hours = Math.floor(totalSeconds / (60 * 60)) //Math.floor(modulo / (60 * 60))
				modulo = modulo % (60 * 60)
				var minutes = Math.floor(modulo / 60)
				var seconds = modulo % 60
				this.timeShower = {
					// days: days,
					// modulo: modulo,
					hours: hours < 10 ? '0' + hours : hours,
					minutes: minutes < 10 ? '0' + minutes : minutes,
					seconds: seconds < 10 ? '0' + seconds : seconds
				}
			},
		},
	}
</script>

<style>
</style>
